const app = Vue.createApp({
    data() {
        return {
            message: '“喵”不可言',
            time: 0,
            index: 0,
            num: 0,
            item: '',
            isStart: false,
            dialogVisible: false,
            imgUrl: ""
        }
    },
    methods: {
        init() {
            this.time = 4 * 60
            const _this = this
            axios({
                url: "/getAllItems",
                method: 'GET'
            }).then((res) => {
                _this.items = res.data
                _this.num = res.data.length
            }).catch()
        },
        start() {
            this.isStart = true
            this.index = setInterval(() => {
                this.time = this.time - 1
                if (this.time < 0) {
                    this.end()
                }
            }, 1000)
            this.getItem()
        },
        end() {
            clearInterval(this.index)
            this.dialogVisible = true
            this.isStart = false
            this.time = 4 * 60
            this.imgUrl = "/static/images/miao" + Math.floor(Math.random() * 31) + ".png"
        },
        next() {
            this.getItem()
        },
        getItem() {
            if (this.num <= 0) {
                this.init()
            }
            let index = Math.floor(Math.random() * this.num)
            this.item = this.items[index]
            this.items.splice(index, 1)
            this.num = this.items.length
        },
    },
    mounted() {
        this.init()
    }
})
app.use(ElementPlus);
app.mount("#view")